import React from 'react';
import { 
  StyleSheet,
  Image,
  Text,
  TouchableOpacity,
  Switch,
  ScrollView,
  View,
  Modal,
  DeviceEventEmitter
} from 'react-native';
import { inject, observer } from 'mobx-react';
import HTMLView from 'react-native-htmlview';

@inject((stores) => {
    return {
      myStore: stores.rootStore.myStore
    }
  })
@observer  class NoticeDetail extends React.Component {
    static navigationOptions = {
        title:'公告详情',
        headerBackTitle: '返回',   
    };
    constructor(props){
		super(props);
        this.state = {
            id: null
        }
	}
    componentDidMount() {
        const id = this.props.navigation.state.params.id;
        this.props.myStore.getNoticeDetail({id: id});
        this.setState({
            id: id
        })
    }
    componentWillUnmount() {
        DeviceEventEmitter.emit('Notice', {id: 1});
	};
    render() {
        const data = this.props.myStore.noticeDetail;
        return (
            <ScrollView contentContainerStyle={styles.container}>
            <View style={styles.container}>
                <View style={styles.detailBox}>
                    <View style={styles.title}>
                        <Text style={styles.titleTxt}>{data.title}</Text>
                        <Text style={styles.titleTime}>{data.addtime}</Text>
                    </View>
                    <View style={styles.result}>
                        <HTMLView 
                            value={data.content}
                            style={styles.resultTxt}>
                        </HTMLView>
                    </View>
                </View>
            </View>
            </ScrollView>
        );
    }
}
const styles = StyleSheet.create({
    container:{
        padding: 20
    },
    detailBox:{
        borderColor:'#BBBBBB',
        borderRadius: 8,
        borderWidth: 1,
        padding: 20
    },
    title:{
        borderBottomColor:'#BBBBBB',
        borderBottomWidth: 1,
        paddingBottom: 10,
    },
    titleTxt:{
        color:'#101010',
        fontSize: 16,
    },
    titleTime:{
        fontSize: 12,
        color:'#999999',
        textAlign:'right'
    },
    result:{
        padding: 10,
        minHeight: 300
    },
    resultTxt:{
        color:'#B9B6B6',
        fontSize: 13
    }
});

export default NoticeDetail;